<template>
  <el-descriptions :column="1" id="popup-top" class="ol-popup-top" border>
    <template #title>
      <span class="popup-title">事件详细信息</span>
    </template>
    <template #extra>
      <span @click="closeUpdatePopup" class="extra">✖</span>
    </template>
    <el-descriptions-item label="事件编号" label-align="center" width="80px" label-class-name="my-label"
      class-name="my-content" >
      <el-input v-model="inputId" style="width: 200px" :placeholder=trafficStore.updateEventList[0]  disabled/>
    </el-descriptions-item>
    <el-descriptions-item label="事件类型" label-align="center" width="80px" label-class-name="my-label"
      class-name="my-content">
      <el-select v-model="typeVal" :placeholder=trafficStore.updateEventList[1] style="width: 200px" disabled>
        <el-option v-for="item in eventTypes" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-descriptions-item>
    <el-descriptions-item label="事件等级" label-align="center" width="80px" label-class-name="my-label"
      class-name="my-content">
      <el-select v-model="levelVal" :placeholder=levelLabel[trafficStore.updateEventList[2]-1] style="width: 200px" disabled>
        <el-option v-for="item in leveltTypes" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-descriptions-item>
    <el-descriptions-item label="发生时间" label-align="center" width="80px" label-class-name="my-label"
      class-name="my-content">
      <el-date-picker v-model="timeVal" type="datetime" :placeholder = trafficStore.timeLabel style="width: 200px"
        value-format="YYYY.MM.DD HH:mm:ss"  disabled/>
    </el-descriptions-item>
    <el-descriptions-item label="发生地点" label-align="center" width="80px" label-class-name="my-label"
      class-name="my-content">
      <el-input v-model="inputAddress" style="width: 200px" :placeholder=trafficStore.updateEventList[4]  disabled/>
    </el-descriptions-item>
    <el-descriptions-item label="车牌号" label-align="center" width="80px" label-class-name="my-label"
      class-name="my-content">
      <el-input v-model="inputPlate" style="width: 200px" :placeholder=trafficStore.updateEventList[5]  disabled/>
    </el-descriptions-item>
    <el-descriptions-item label="驾驶员" label-align="center" width="80px" label-class-name="my-label"
      class-name="my-content">
      <el-input v-model="inputDriver" style="width: 200px" :placeholder=trafficStore.updateEventList[6]  disabled/>
    </el-descriptions-item>
    <el-descriptions-item label="处理状态" label-align="center" width="80px" label-class-name="my-label"
      class-name="my-content">
      <el-select v-model="stateVal" :placeholder=stateLabel[trafficStore.updateEventList[7]] style="width: 200px">
        <el-option v-for="item in stateTypes" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-descriptions-item>
  </el-descriptions>
  <div id="popup-bottom" class="ol-popup-bottom">
    <el-button type="default" size="small" @click="updateEvent">更新</el-button>
    <el-button type="default" size="small" @click="closeUpdatePopup">取消</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue"
import { closeUpdatePopup, setPopup } from "@/ol-api/popup";
import { useTrafficStore } from "@/stores/counter";
import { Point } from "@/mapgis-api/Point"
const trafficStore = useTrafficStore()
const { toggleUpdatePopupVisible} = useTrafficStore()
let $docLayer = null
let $map = null
let { proxy } = getCurrentInstance()
onMounted(() => {
  $docLayer = proxy.$docLayer
  $map = proxy.$map
  
})
// input的v-model绑定变量
const inputId = ref('')
const inputAddress = ref('')
const inputPlate = ref('')
const inputDriver = ref('')
// select的v-model绑定变量
const typeVal = ref('')
const levelVal = ref('')
const stateVal = ref('')
// date-picker的v-model绑定变量
const timeVal = ref('')
//事件类型选项
const eventTypes = [
  { label: '翻车', value: '翻车' },
  { label: '刮擦', value: '刮擦' },
  { label: '碾压', value: '碾压' },
  { label: '碰撞', value: '碰撞' },
  { label: '其他', value: '其他' },
  { label: '失火', value: '失火' },
]
//事件等级选项
const leveltTypes = [
  { label: '一般事故', value: 1 },
  { label: '较大事故', value: 2 },
  { label: '重大事故', value: 3 },
  { label: '严重事故', value: 4 },
]
//处理状态选项
const stateTypes = [
  { label: '未处理', value: 0 },
  { label: '处理中', value: 1 },
  { label: '已归档', value: 2 },
]
const stateLabel = ref(['未处理', '处理中', '已归档'])
const levelLabel = ref(['一般事故', '较大事故', '重大事故', '严重事故'])
//更新事件点
const updatePoint = ({ inputId, typeVal, levelVal, timeVal, inputAddress, inputPlate, inputDriver, stateVal }) => {
  //设置属性
  const atrributes = [
    { name: "事件编号", type: "string", value: inputId },
    { name: "事件类型", type: "string", value: typeVal },
    { name: "事件等级", type: "short", value: levelVal },
    { name: "发生时间", type: "string", value: timeVal },
    { name: "发生地点", type: "string", value: inputAddress },
    { name: "车牌号", type: "string", value: inputPlate },
    { name: "驾驶员", type: "string", value: inputDriver },
    { name: "处理状态", type: "short", value: stateVal },
  ]
  Point.update({ position: trafficStore.eventPosition, attr: atrributes, fid: trafficStore.fid, service, docLayer: $docLayer })
  //刷新地图
  // $docLayer.refresh()
  
  
}
//设置service
let service = { name: "xm", layerId: 2 }
//更新
const updateEvent = () => {
  if (stateVal.value.length) {
    alert('事件更新不能有空值')
    return
  }
  else {
    updatePoint({ inputId: trafficStore.updateEventList[0], typeVal: trafficStore.updateEventList[1], levelVal: trafficStore.updateEventList[2], timeVal: trafficStore.updateEventList[3], inputAddress: trafficStore.updateEventList[4], inputPlate: trafficStore.updateEventList[5], inputDriver: trafficStore.updateEventList[6], stateVal: stateVal.value })
    inputId.value = ''
    typeVal.value = ''
    levelVal.value = ''
    timeVal.value = ''
    inputAddress.value = ''
    inputPlate.value = ''
    inputDriver.value = ''
    stateVal.value = ''
    setPopup(null, $map)
  }
  console.log($map.getLayers().getArray());
  // 清除地图中画笔的source
  trafficStore.updatePopupSource.clear()
  //关闭弹窗的同时关闭pinia中的弹窗状态
  toggleUpdatePopupVisible()
}
</script>

<style scoped>
.ol-popup-top {
  background-color: #70caf5;
  color: white;
  font-size: 10px;
  padding: 5px;
  border-bottom: 1px solid pink;
}

.ol-popup-content {
  padding: 8px;
  font-size: 5px;
  display: flex;
  align-items: center;
}

/* 自定义弹框样式 */
.popup-title {
  font-size: 14px;
  font-weight: bold;
  color: aliceblue;
}

:deep(.my-label) {
  display: flex;
  justify-content: center;
  font-size: 12px !important;
  font-family: "微软雅黑" !important;
  color: rgba(0, 0, 0, 0.9) !important;
}

:deep(.my-content) {
  font-size: 10px !important;
  padding: 0px 2px !important;
}

.ol-popup-bottom {
  padding: 5px;
  display: flex;
  justify-content: center;
}

.ol-popup-bottom button {
  padding: 10px;
}

.extra:hover {
  cursor: pointer;
}
</style>